import { Button, Flex, Form, Input, message, Modal } from 'antd';
import { useIntl, useModel } from 'umi';

import gift from '@/assets/gift.png';
import gift1 from '@/assets/gift2.png';
import PrivacyModal from '@/pages/Info/components/PrivacyModal';
import { handleReward } from '@/services/login';
import { formatNumber } from '@/utils';
import { noNumber } from '@/utils/common';
import { useEffect, useState } from 'react';
type Props = {
  visible: boolean;
  handleCancel: () => void;
  record: Partial<Center.Record>;
  handleOk: () => void;
};
const ApplyModal: React.FC<Props> = ({ record, visible, handleCancel, handleOk }) => {
  const intl = useIntl();
  const { user } = useModel('userModel');
  const { firstNameCn, lastNameCn } = user || {};
  const { platformRebate, rebateMaxAmount = 0, orderNo, applyAmount = 0, id = '' } = record;
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const values = Form.useWatch([], form);

  const [submittable, setSubmittable] = useState<boolean>(false);
  useEffect(() => {
    if (values && Object.keys(values).length > 0 && visible) {
      form
        .validateFields({ validateOnly: true })
        .then(() => {
          setSubmittable(true);
        })
        .catch(() => setSubmittable(false));
    } else {
      setSubmittable(false);
    }
  }, [form, values, visible]);
  return (
    <Modal
      className="gift_modal"
      footer={false}
      onCancel={handleCancel}
      width={1000}
      open={visible}
      destroyOnClose
    >
      {platformRebate && platformRebate != '<p></p>' && (
        <div
          style={{
            background: 'linear-gradient(336.24deg, #F0F6FF 7.58%, #DEEEFF 77.98%)',
            padding: '37px 42px 23px',
            borderRadius: 10,
            marginTop: 30,
            color: '#333',
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          <div style={{ fontSize: 24, fontWeight: 700 }}>
            {intl.formatMessage({ id: 'center.preferential' }, { num: rebateMaxAmount })}
          </div>
          <div
            className="scrool"
            style={{ fontSize: 15, marginTop: 6, height: '70px', overflow: 'auto' }}
          >
            {platformRebate}
          </div>
          <img style={{ position: 'absolute', right: -18, bottom: -18 }} src={gift} width={100} />
        </div>
      )}
      <div style={{ padding: '60px 150px 20px' }}>
        <Flex justify="space-between" style={{ fontSize: 20 }}>
          <div style={{ color: '#333' }}>
            {intl.formatMessage({ id: 'center.order_id' })}：{orderNo}
          </div>
          <div style={{ color: '#000' }}>
            {intl.formatMessage({ id: 'center.loan_money' })}：
            <span style={{ color: '#0065FD', fontWeight: 700 }}>
              HK {formatNumber(applyAmount?.toFixed(2))}
            </span>
          </div>
        </Flex>
        {/* 獲取獎勵 */}
        <Flex
          align="center"
          style={{
            borderRadius: 8,
            margin: '14px 0 23px 0',
            background: 'linear-gradient(93.33deg, #FFF6E5 8.15%, #FEFDFA 87.31%)',
          }}
        >
          <div>
            <img src={gift1} width={150} />
          </div>
          <div
            style={{
              fontWeight: 700,
              color: 'transparent',
              backgroundClip: 'text',

              padding: '15px 0',

              backgroundImage: 'linear-gradient(90deg, #F52F0D 0%, #F97024 100%)',
            }}
          >
            <div style={{ fontSize: 26 }}>{intl.formatMessage({ id: 'center.congratulate' })}</div>
            <div style={{ fontSize: 30, textAlign: 'center' }}>
              HK {formatNumber((applyAmount * 0.01).toFixed(2))}
            </div>
          </div>
        </Flex>
        <div style={{ fontSize: 22, color: '#000' }}>
          {intl.formatMessage({ id: 'center.collection' })}
        </div>
        <div style={{ fontSize: 18, margin: '5px 0 24px 0' }}>
          <span style={{ color: '#868686' }}>
            {intl.formatMessage({ id: 'center.collection_name' })}：
          </span>
          <span style={{ color: '#000' }}>
            {firstNameCn}
            {lastNameCn}
          </span>
        </div>
        <Form
          form={form}
          onFinish={async (values: { account: string; bank: string }) => {
            const { account, bank } = values;
            const { code, message: msg } = await handleReward({
              bank,
              id,
              account,
            });
            if (code == '100200') {
              message.success(msg);
              handleOk();
            }
          }}
          requiredMark={false}
          layout="vertical"
        >
          <Form.Item
            name="bank"
            rules={[
              { required: true, message: intl.formatMessage({ id: 'center.collection_bank' }) },
              noNumber,
            ]}
            label={intl.formatMessage({ id: 'center.collection_bank' })}
          >
            <Input
              style={{ height: 60, border: '1px solid #333', fontSize: 18 }}
              placeholder={intl.formatMessage({ id: 'center.collection_bank' })}
            />
          </Form.Item>
          <Form.Item
            name="account"
            rules={[
              { required: true, message: intl.formatMessage({ id: 'center.collection_account' }) },
            ]}
            label={intl.formatMessage({ id: 'center.collection_account' })}
          >
            <Input
              style={{ height: 60, border: '1px solid #333', fontSize: 18 }}
              placeholder={intl.formatMessage({ id: 'center.collection_account' })}
            />
          </Form.Item>

          {/* <Form.Item
            labelCol={{ span: 0 }}
            label={intl.formatMessage({ id: 'center.collection_agree' })}
            rules={[{ required: true }]}
            name="agreement"
            valuePropName="checked"
          >
            <Radio style={{ color: '#666', fontSize: 16 }}>
              {intl.formatMessage({ id: 'home.accept' })}，
              <span
                onClick={() => {
                  setModalVisible(true);
                }}
                style={{ color: '#0070Df', cursor: 'pointer' }}
              >
                {intl.formatMessage({ id: 'home.use_charges' })}
              </span>
              <span style={{ color: '#000', margin: '0 4px' }}>
                {intl.formatMessage({ id: 'home.and' })}
              </span>
              <span
                onClick={() => {
                  setModalVisible(true);
                }}
                style={{ color: '#0070Df', cursor: 'pointer' }}
              >
                {intl.formatMessage({ id: 'login.private' })}
              </span>
            </Radio>
          </Form.Item> */}

          <Form.Item style={{ marginTop: 40 }}>
            <Button
              disabled={!submittable}
              htmlType="submit"
              type="primary"
              style={{
                height: '60px',
                width: '100%',
                display: 'flex',
                border: 'none',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <div style={{ fontSize: 16 }}>{intl.formatMessage({ id: 'center.draw_down' })}</div>
            </Button>
          </Form.Item>
        </Form>
      </div>
      <PrivacyModal
        visible={modalVisible}
        handleCancel={() => {
          setModalVisible(false);
        }}
      />
    </Modal>
  );
};

export default ApplyModal;
